<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个性svg倒计时 </title>
<script src="js/jquery-1.10.2.js"></script>
<style>
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

.svg {
  width: 400px;
}
@media (max-height: 400px) {
  .svg {
    width: 250px;
  }
}
.svg .paths {
  display: none;
}
.svg .circle {
  fill: #ffffff;
}
.svg.gooey .circles {
}

.controller {
  position: fixed;
  top: 20px;
  right: 20px;
  color: #000;
  font-family: sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  padding: 15px 20px 12px 15px;
  background: #fff;
  border-radius: 20px;
}
@media (max-height: 400px) {
  .controller {
    top: 10px;
    right: 10px;
  }
}
.controller span {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.controller span:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -22px;
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.controller span:after {
  content: "";
  background: #fff;
  position: absolute;
  z-index: 1;
  top: 1px;
  left: -18px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.controller input {
  opacity: 0.01;
  height: 0;
}
.controller input:checked + span:after {
  opacity: 1;
}</style>
</head>
<body>
<script src="js/gsap.min.js"></script>
<svg viewbox="0 0 256 256" class="svg gooey">
  <defs>
    <filter id="filter">
      <fegaussianblur in="SourceGraphic" stddeviation="10" result="blur"></fegaussianblur>
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -14" result="filter"></fecolormatrix>
      <fecomposite in="SourceGraphic" in2="filter" operator="atop"></fecomposite>
    </filter>
  </defs>
  <g class="paths">
    <path id="path_0" class="path" d="M185,131.2c0,25.5-5.1,45.6-15.4,60.3c-10.3,14.7-24.1,22-41.7,22c-17.5,0-31.4-7.3-41.5-22 c-10.1-14.7-15.2-34.8-15.2-60.3v-6.6c0-25.5,5.1-45.7,15.2-60.4C96.6,49.4,110.4,42,128,42c17.5,0,31.4,7.4,41.7,22.1
      c10.3,14.8,15.4,34.9,15.4,60.4V131.2z"></path>
    <path id="path_1" class="path" d="M87.9,79.2c1.1-0.4,53.7-39.2,54.9-39.1v180.5"></path>
    <path id="path_2" class="path" d="M81.7,85.7c-1.4-67,112.3-55.1,90.2,11.6c-12.6,32-70.6,83.7-88.8,113.7h105.8"></path>
    <path id="path_3" class="path" d="M74.8,178.5c3,39.4,63.9,46.7,88.6,23.7c34.3-35.1,5.4-75.8-41.7-77c29.9,5.5,68.7-43.1,36.5-73.7 c-23.4-21.5-76.5-11.1-78.6,25"></path>
    <path id="path_4" class="path" d="M161.9,220.8 161.9,41 72.6,170.9 208.2,170.9"></path>
    <path id="path_5" class="path" d="M183.2,43.7H92.1l-10,88.3c0,0,18.3-21.9,51-21.9s49.4,32.6,49.4,48.2c0,22.2-9.5,57-52.5,57
      s-51.4-36.7-51.4-36.7"></path>
    <path id="path_6" class="path" d="M177.4,71.6c0,0-4.3-30.3-44.9-30.3s-57.9,45.6-57.9,88.8s9,86.5,56.2,86.5
      c38.9,0,50.9-22.3,50.9-60.9c0-17.6-21-44.9-48.2-44.9c-36.2,0-55.2,29.6-55.2,58.2"></path>
    <path id="path_7" class="path" d="M73.3,43.7 177.7,43.7 97.9,220.6 "></path>
    <path id="path_8" class="path" d="M126.8,122.8c0,0,48.2-1.3,48.2-42.2s-48.2-39.9-48.2-39.9s-45.9,0-45.9,40.9 c0,20.5,18.8,41.2,46.9,41.2c29.6,0,54.9,18,54.9,47.2c0,0,2,44.9-54.2,44.9c-55.5,0-54.2-43.9-54.2-43.9s-0.3-47.9,53.6-47.9"></path>
    <path id="path_9" class="path" d="M78.9,186.3c0,0,4.3,30.3,44.9,30.3s57.9-45.6,57.9-88.8s-9-86.5-56.2-86.5 c-38.9,0-50.9,22.3-50.9,60.9c0,17.6,21,44.9,48.2,44.9c36.2,0,55.2-29.6,55.2-58.2"></path>
  </g>
  <g class="circles"></g>
</svg>

<div class="controller">
  <label><input id="gooey" type="checkbox" checked=""> <span>Gooey Effect</span></label>
</div>

<script>
const $svg = document.querySelector('.svg');
const $gooey = document.querySelector('#gooey');
$gooey.addEventListener('change', () => {
  $svg.classList.toggle('gooey');
});

const opts = {
  num: 31,
  radius: 20 };


const init = () => {
  const circles = document.querySelector('.circles');
  const namespace = 'http://www.w3.org/2000/svg';

  for (let i = 0; i < opts.num; i++) {
    const circle = document.createElementNS(namespace, 'circle');
    circle.classList.add('circle');
    circle.setAttribute('r', opts.radius);
    circle.setAttribute('cx', 128);
    circle.setAttribute('cy', 128);
    circles.appendChild(circle);
  }

  let n = 10;
  setInterval(() => {
    n = n - 1;
    animate(n);
    if (n === 0) n = 10;
  }, 1200);
};
init();

const animate = n => {
  const paths = document.querySelectorAll('.path');
  const circles = document.querySelectorAll('.circle');
  if (!paths[n]) return;
  const length = paths[n].getTotalLength();
  const step = length / opts.num;
  for (let i = 0; i < opts.num; i++) {
    const { x, y } = paths[n].getPointAtLength(i * step);

    gsap.to(circles[i], {
      cx: x,
      cy: y,
      ease: 'power3.out',
      fill: i % 2 === 0 ? 'red' : 'white',
      delay: i * 0.024 });

  }
};
animate();</script>

</body>
</html>
